<script setup>
import {reactive,defineEmits} from 'vue'
const emit = defineEmits(['search'])

// 搜索
const searchData = reactive({
  username: '',
  product: '',
  industry: '',
  startDate: '',
  endDate: ''
})

const toSearch = () => {
  emit('search',searchData)
}

</script>

<template>
  <div class="main-input">
      <div>
        <span>用户名：</span>
        <input type="text" v-model="searchData.username">
      </div>
      <div>
        <span>产品线：</span>
        <input type="text" v-model="searchData.product">
      </div>
      <div>
        <span>行业：</span>
        <input type="text" v-model="searchData.industry">
      </div>
      <div class="main-input-date">
        <span>任务创建时间：</span>
        <input type="text" placeholder="开始时间" v-model="searchData.startDate">
        <span>~</span>
        <input type="text" placeholder="结束时间" v-model="searchData.endDate">
      </div>
      <div class="main-input-button">
        <button @click="toSearch">搜索</button>
      </div>
    </div>
</template>

<style lang="less" scoped>
  .main-input {
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-around;

    div {
      width: 30%;

      span {
        font-size: 20px;
      }

      input {
        width: 8vw;
        height: 30px;
        font-size: 20px;
      }
    }

    .main-input-date {
      width: 65%;

      input {
        width: 10vw;
      }
    }

    .main-input-button {
      button {
        width: 150px;
        height: 50px;
        font-size: 20px;
      }
    }
  }
</style>